<template>
  <div>
    <el-input
      v-model="label"
      :size="size"
      readonly
      @focus="open"
      @mouseenter.native="inputHovering = true"
      @mouseleave.native="inputHovering = false"
    >
      <el-button slot="append" icon="el-icon-search" @click="open"></el-button>
      <template slot="suffix">
        <i
          v-show="showClose"
          class="el-select__caret el-input__icon el-icon-circle-close"
          @click="handleClearClick"
        ></i>
      </template>
    </el-input>
    <el-dialog
      v-el-drag-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="350px"
    >
      <el-input
        v-model="keyword"
        placeholder="输入关键字进行过滤"
      >
      </el-input>
      <el-tree
        ref="tree"
        :data="filterData(treeData)"
        :filter-node-method="filterNode"
        :node-key="treeOption.key"
        :props="treeOption"
        :show-checkbox="multiple"
        highlight-current
        @node-expand="nodeExpand"
        @node-click="handleNodeClick"
      ></el-tree>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

import _ from 'lodash'

export default {
  props: {
    size: { // input框大小
      type: String,
      default: ''
    },
    value: { // 选中值
      type: String,
      default: ''
    },
    treeData: { // 树数据
      type: Array,
      default: function () {
        return []
      }
    },
    treeProps: { // 树Prop字段
      type: Object,
      default: function () {
        return {
          children: 'children',
          label: 'label',
          key: 'uuid'
        }
      }
    },
    dialogTitle: { // 弹出选择框标题
      type: String,
      default: '选择参数'
    },
    multiple: { // 多选
      type: Boolean,
      default: false
    },
    filterValue: { // 过滤不显示的节点(目前不支持多个值过滤。后期添加)
      type: [String, Number],
      default: ''
    }
  },
  data () {
    return {
      data: '',
      dialogVisible: false,
      keyword: '',
      currentNode: null,
      label: '',
      inputHovering: false
    }
  },
  computed: {
    treeOption () {
      return {
        children: this.treeProps.children || 'children',
        label: this.treeProps.label || 'label',
        key: this.treeProps.key || 'uuid'
      }
    },
    showClose () {
      return this.inputHovering && this.label
    }
  },
  watch: {
    value: {
      immediate: true,
      handler (value) {
        this.data = value
        this.updateLabel()
      }
    },
    keyword (val) {
      this.$refs.tree.filter(val)
    },
    treeData () {
      this.updateLabel()
    }
  },
  methods: {
    filterData (data) { // filterValue根节点过滤
      if (this.filterValue) {
        const index = _.findIndex(data, item => item[this.treeProps.key] === this.filterValue)
        if (index > -1) {
          data.splice(index, 1)
        }
      }
      return data
    },
    nodeExpand (data) { // filterValue节点过滤
      if (!this.filterValue) {
        return
      }
      const index = _.findIndex(data.children, item => item[this.treeProps.key] === this.filterValue)
      if (index > -1) {
        data.children.splice(index, 1)
      }
    },
    filterNode (value, data) { // 搜索过滤
      if (!value) return true
      return data[this.treeOption.label].indexOf(value) !== -1
    },
    handleClearClick () { // 清空选中值
      this.label = ''
      this.data = ''
      this.$refs.tree && this.$refs.tree.setCurrentNode('')
      this.$emit('input', this.data)
    },
    handleNodeClick (data) { // 当前选中节点
      this.currentNode = data
    },
    close () { // 关闭弹窗
      this.dialogVisible = false
    },
    open () { // 打开弹窗，初始化选中
      this.dialogVisible = true
      this.$nextTick(() => {
        if (this.multiple) {
          this.$refs.tree.setCheckedKeys(this.data.split(','))
        } else {
          this.$refs.tree.setCurrentKey(this.data)
        }
      })
    },
    submit () { // 确认选中
      let node = null
      if (this.multiple) {
        node = this.$refs.tree.getCheckedNodes()
        if (!node.length) {
          this.$message({
            type: 'info',
            message: '未选择数据'
          })
          return
        }
        this.data = node.map(item => item[this.treeOption.key]).join()
      } else {
        node = this.currentNode
        if (!node) {
          this.$message({
            type: 'info',
            message: '未选择数据'
          })
          return
        }
        this.data = node[this.treeOption.key]
      }
      this.$emit('input', this.data)
      this.$emit('confirm', node)
      this.dialogVisible = false
    },
    getLabel (arr, key) { // 获取显示列
      let label = ''
      arr.forEach(item => {
        if (item[this.treeProps.key] === key) {
          label = item[this.treeProps.label]
        } else if (item[this.treeProps.children]) {
          label = label || this.getLabel(item[this.treeProps.children], key)
        }
      })
      return label
    },
    updateLabel () { // 更新显示列
      this.label = ''
      if (this.multiple) {
        const arr = this.data.split(',')
        arr.forEach((item, index) => {
          this.label += this.getLabel(this.treeData, item)
          if (index !== arr.length - 1) {
            this.label += ','
          }
        })
      } else {
        this.label = this.getLabel(this.treeData, this.data)
      }
    }
  }
}
</script>

<style scoped lang="scss">
  .deep {
    .el-dialog__body {
      background-color: #fff;
    }
  }

  .el-tree {
    margin-top: 10px;
    height: 200px;
    overflow: auto;
  }

  .el-icon-circle-close {
    cursor: pointer;

    &:hover {
      color: #888888;
    }
  }
</style>
